<template>
  <div class="tmpl">
		<!-- 头像 -->
		<div class="portrait" v-for="item in names">
				<div class="portrati-top">
						<div class="portrati-top-img" >
								<img :src="item.img_url" alt="">
						</div>
						<p>昵称：<span>{{item.name}}</span>  ID：<span>{{item.ID}}</span>   </p>
				</div>
	
				<div class="portrati-botton">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
		           <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon-extra mui-icon-extra-custom"></span>
		                    <div class="mui-media-body">客服</div></a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon-extra mui-icon-extra-heart-filled"></span>
		                    <div class="mui-media-body">收藏</div></a>
								</li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon-extra mui-icon-extra-prech"></span>
		                    <div class="mui-media-body">余额</div></a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon-extra mui-icon-extra-topic"></span>
		                    <div class="mui-media-body">订单</div></a>
								</li>
		        </ul> 


				</div>
	</div>

<ul class="mt-cel">
	<li>
		<mt-cell title="订单">
			<span class=" mui-navigate-right"></span>
			<img slot="icon" src="../../../static/images/edit_b.png" width="24" height="24">
		</mt-cell>
	</li>
		<li>
			 <router-link class="mui-tab-item" to="/shopcar">
				<mt-cell title="购物车">
					<span class=" mui-navigate-right"></span>
					<img slot="icon" src="../../../static/images/cart_b.png" width="24" height="24">
				</mt-cell>
			</router-link>
	</li>
	<li>
		<mt-cell title="积分">
			<span class=" mui-navigate-right"></span>
			<img slot="icon" src="../../../static/images/mcc_10_b.png" width="24" height="24">
		</mt-cell>
	</li>
			<li>
		<mt-cell title="分享">
			<span class=" mui-navigate-right"></span>
			<img slot="icon" src="../../../static/images/mcc_15_b.png" width="24" height="24">
		</mt-cell>
	</li>
	<li>
		<router-link class="mui-tab-item" to="/field">
			<mt-cell title="设置">
				<span class=" mui-navigate-right"></span>
				<img slot="icon" src="../../../static/images/set_b.png" width="24" height="24">
			</mt-cell>
		</router-link>
	</li>
	<li>
		<router-link class="mui-tab-item" to="/login/login">
			<mt-cell title="退出当前账号">
				<span class=" mui-navigate-right"></span>
				<img slot="icon" src="../../../static/images/set_b.png" width="24" height="24">
			</mt-cell>
		</router-link>
	</li>
</ul>





  </div>
</template>

<script>
import { Cell } from 'mint-ui';


export default {
 		data(){
 			return{
 				names:[
					 {
						 img_url:"http://img4.imgtn.bdimg.com/it/u=2490615113,152878193&fm=27&gp=0.jpg",
						 name:"zhou",
						 ID:199202
					 }

				 ]
 				
 			
 			}
		 }  ,methods:{
                getnewslist(){
                    //利用vue-resoutce请求图文
                    // 讲烈表数据赋值给list属性上
                    //  var url = commom.apihost + '/api/seller';
                 	 this.$http.get("url").then(res=>{
							 this.list = res.data.data;
						 },res=>{
							 console.log('获取失败');
						 });
                }

         }
 		
}
</script>

<style scoped>
li{  
    list-style: none;
}
/* 头像 */
.portrait{
	height: 250px;
	background-color: #0049ff;
	overflow:hidden;
}
.portrati-top{
	width: 100%;
	height: 160px;
}
.portrati-top-img{
	position: relative;
	top:25px;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
}
.portrati-top-img img{
	width: 100%;
}
.portrati-top p{
 margin: 40px 0 0 0;
 text-align: center;
 font-size: 16px;
}
.portrati-top p span{
 margin: 0 15px 0 0;
 color: #fff;
}
.portrati-botton{
	background-color: rgba(0, 0,0, 0.2)
}

/* // 定义9宫格图片样式 */

.mui-icon{
width:50px ;
height:50px ;
}
.mui-grid-view.mui-grid-9{
background-color: rgba(0, 0,0, 0);
border-top: none;
border-left:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
border-right:none;
border-bottom:none;
}


.mui-icon-home:before,
.mui-icon-navigate:before,
.mui-icon-gear:before,
.mui-icon-paperplane:before,
.mui-icon-info:before,
.mui-icon-help:before
{
content: '';
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
	color: #ffffff;
	font-size: 12px;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon{
	font-size: 28px;
	height: 28px;
}

/* mt-cel */
.mt-cel{
margin: 0 0;
padding: 0 0;
}
.mt-cel li{
margin: 0 0;
padding: 0 0;
font-size: 12px;
border-bottom: 1px solid #ccc;
}
.mt-cel li mt-cel img{
width: 15px;
height: 15px;

}

</style>
